<!-- shipCertificateSee -->

<template>
  <div class="loadHomeWork">
    <div class="loadHomeWorkIneer">
      <div class="loadTop">LNG作业规范</div>

      <div class="tableButtonContain" :style="{ width: tableWidth }">
        <div class="shiptypeIndexContain">
          <div
            class="everyIndexButtonCOntain"
            v-for="(item, index) in containList"
          >
            <div
              class="everyIndexButton"
              @click="clickToSecondPage(item)"
            ></div>
            <div class="layerName">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import rename from "@/mitt/getPath.js";
import service from "@/api/api";

// import userName from "@/assets/img/userName.png";
export default {
  name: "",
  data() {
    return {
      tableWidth: null,
      containList: [],
      typeKey: "",
    };
  },

  methods: {
    clickToSecondPage(item) {
      this.$router.push({
        path: "app.lngStandardAddSecond",
        query: {
          value: item.value,
          name: item.name,
        },
      });
    },
    sendMessage() {
      let res = rename();
      EventBus.emit("custom-event", res);
    },
    // 获取列表数据
    async getRenderList() {
      let data = {
        typeKey: this.typeKey,
      };

      await service({
        methods: "get",
        url: "dict-type/find-dict-item-list",
        params: data,
      })
        .then((e) => {
          this.containList = e.data;
        })
        .catch((err) => {});
    },
    async findAllType() {
      await service({
        methods: "get",
        url: "/dict-type/find-all",
      })
        .then((e) => {
          // this.containList = e.data;
          for (let i = 0; i < e.data.length; i++) {
            if (e.data[i].name == "行业规范种类") {
              this.typeKey = e.data[i].typeKey;
            }
          }
          this.getRenderList();
        })
        .catch((err) => {});
    },
    handSize() {
      if (window.innerWidth > 630) {
        if (this.$store.state.width == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        } else if (this.$store.state.width == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        }
      } else {
        this.tableWidth = window.innerWidth - 30 + "px";
      }
    },
  },
  watch: {
    "$store.state.width"(newVal, oldVal) {
      //对数据执行操作

      if (window.innerWidth > 630) {
        if (newVal == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        } else if (newVal == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        }
      }
    },
  },

  created() {
    this.findAllType();
    this.sendMessage();
  },
  beforeMount() {
    if (window.innerWidth > 630) {
      if (this.$store.state.width == 200) {
        this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
      } else if (this.$store.state.width == 90) {
        this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
      }
    } else {
      this.tableWidth = window.innerWidth - 30 + "px";
    }
  },
  mounted() {
    // this.sendMessage();
    window.addEventListener("resize", this.handSize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handSize);
  },
};
</script>
<style lang="less" scoped>
.loadHomeWork {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  .loadHomeWorkIneer {
    width: 98.5%;
    height: 91vh;
    margin: auto;
    margin-top: 1vh;
    overflow: auto;
    background: white;

    .loadSecond {
      width: 280px;

      color: black;
      text-align: center;
      line-height: 33px;
      color: black;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 10px;
      font-size: 15px;
      .topName {
        width: 90px;
        line-height: 33px;
        background: #67c23a;
        border-radius: 5px;
        a {
          display: block;
          width: 90px;
          line-height: 33px;
          text-decoration: none;
          color: white;
        }
      }
      .topName:nth-child(3) {
        background: #242121;
      }
    }
  }
}
</style>
